<template>
  <el-menu
    :active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#750000"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1" style="font-size: 24px;">
      &nbsp;&nbsp;标注系统
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">标注查看</template>
<!--      <el-menu-item index="2-1">城市查询</el-menu-item>-->
<!--      <el-menu-item index="2-2">航班查询</el-menu-item>-->
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">标注审核</template>
<!--      <el-menu-item index="3-1">订单查询</el-menu-item>-->
<!--      <el-menu-item index="3-2">用户信息</el-menu-item>-->
    </el-submenu>
<!--    <el-submenu index="4">-->
<!--      <template slot="title">我的</template>-->
<!--      <el-menu-item index="4-1">信息修改</el-menu-item>-->
<!--      <el-menu-item index="4-2">订单记录</el-menu-item>-->
<!--    </el-submenu>-->
<!--    <el-menu-item index="5">航班管理</el-menu-item>-->

    <el-menu-item class="left_tab" index="6">{{tabInfo.left}}</el-menu-item>
    <el-menu-item class="right_tab" index="7">{{tabInfo.right}}</el-menu-item>
  </el-menu>
</template>

<script>
  export default {
    name: "HeadRight",
    data() {
      return {
        activeIndex: "",
        tabInfo: {
          left: "登录",
          right: "注册"
        },
        donghua: require('../../assets/logo.jpg')
      };
    },
    mounted() {
      if (sessionStorage.getItem('login_state') === 'true') {
        this.tabInfo.left = sessionStorage.getItem('pname');
        this.tabInfo.right = '注销登录';
      }
    },
    methods: {
      handleSelect(key) {
        switch (key) {
          case '1':
            this.$router.push({path: '/Index'});
            break;
          case '2-1':
            this.$router.push({path: '/Ticket/CityTicket'});
            break;
          case '2-2':
            this.$router.push({path: '/Ticket/AcTicket'});
            break;
          case '3-1':
            this.$router.push({path: '/BackStage/UserQuery'});
            break;
          case '3-2':
            this.$router.push({path: '/BackStage/AllUsers'});
            break;
          case '4-1':
            this.$router.push({path: '/User/Modify'});
            break;
          case '4-2':
            this.$router.push({path: '/User/PersonalOrder'});
            break;
          case '5':
            this.$router.push({path: '/FlightCRUD/Flights'});
            break;
          case '6': {
            if (this.tabInfo.left === '登录')
              this.$router.push({path: '/login_new'});
            else this.$router.push({path: '/User/Modify'});
          }
            break;
          case '7': {
            if (this.tabInfo.right === '注册')
              this.$router.push({path: '/Account/Register'});
            else this.userLogout();
          }
            break;
        }
      },
      userLogout() {
        sessionStorage.clear();
        this.tabInfo.left = '登录';
        this.tabInfo.right = '注册';
      }
    },
    watch: {
      '$route'() {
        console.log('hello');
        if (sessionStorage.getItem('login_state') === 'true') {
          this.tabInfo.left = sessionStorage.getItem('username');
          this.tabInfo.right = '注销登录';
        }
      }
    }
  }
</script>

<style scoped>
  .left_tab {
    float: right;
    text-align: center;
    width: 150px;
  }

  .right_tab {
    float: right;
    text-align: center;
    width: 150px;
  }

  .left_tab:hover,
  .right_tab:hover {
    background-color: #545c64;
  }
</style>
